import React, { Component } from 'react';
import {Button,Table,Popconfirm,message,Divider,Spin} from 'antd';
import moment from 'moment';
import styles from './index.less';
import { connect } from 'dva';
import AddLebal from './addLebal';

  @connect(({ global, pruductLebal, loading}) => ({
    oemInfo: global.oemInfo,
    pruductLebal:pruductLebal.pruductLebal,
    // startLoading: loading.effects['pruductLebal/GetLabelList'],
  }))

  class ProductLabel extends Component {
    constructor(props) {
        super(props);
        this.state ={
            pagination: {
                showSizeChanger: true,
                showTotal: total => `共 ${total} 条记录`,
                pageSize: 10,
                total: 0,
            },
            loading: false,
            startLoading: true,
        }
    }

    componentWillMount() {
        this.getLabelList(1);
        window.Isoption = false;
    }
      componentDidMount() {
        window.Isoption = true;
      }

    // 添加标签
    clickAddLabel = name => {
        const { dispatch } = this.props;
          dispatch({
            type: 'pruductLebal/AddLabel',
            payload: {
               name: name,
            },
            callBack: {
                success: res => {
                    if(res.Code === 0) {
                        message.success('添加成功');
                        this.setState(
                            {
                                loading: true,
                            },
                            () => {
                                this.getLabelList(1);
                            }
                        );
                    }
                },
                error: res => {
                    message.error(res.Msg, 2);
                },
            },
          });
    };

    // 修改标签
    clickEditLabel = data => {
        const { dispatch } = this.props;
        dispatch({
          type: 'pruductLebal/EditLebalName',
          payload: {
              id: data.id,
             name: data.name,
          },
          callBack: {
              success: res => {
                  if(res.Code === 0) {
                      message.success('修改成功');
                      this.setState(
                          {
                            loading: true,
                          },
                          () => {
                            this.getLabelList(1);
                          }
                      );
                  }
              },
              error: res => {
                  message.error(res.Msg, 2);
              },
          },
        });
    }

    // 删除
    clickDelete = id => {
        const { dispatch } = this.props;
        const deleteId = id.toString();
        dispatch({
            type: 'pruductLebal/DeleteLebal',
            payload: {
              id: deleteId,
            },
            callBack: {
              success: res => {
                if (res.Code === 0) {
                  message.success('删除成功');
                  this.setState({
                      loading: true
                  },
                    () => {
                        this.getLabelList(1);
                    }
                  );
                }
              },
              error: res => {
                message.error(res.Msg);
              },
            },
          });
    }

    //获取标签列表
    getLabelList= pageIndex => {
        const { dispatch, pruductLebal} = this.props;
        dispatch({
            type: 'pruductLebal/GetLabelList',
            payload: {
                pageIndex: pageIndex,
                pageSize: this.state.pagination['pageSize']
            },
            callBack: {
                success: res => {
                    if(res.Code ===0) {
                        this.setState({
                            loading: false,
                            startLoading: false,
                            pagination: {
                                pageSize: this.state.pagination['pageSize'],
                                current: pageIndex,
                                total: res.Data.Total,
                                showSizeChanger: true,
                                showTotal: total => `共 ${total} 条记录`,
                            },
                        });
                    }
                },
                error: res => {
                    message.error(res.Msg);
                },
            },
        });
    }

    // change
    changeTable =(data, filters, sorter) => {
        this.setState(
            {
              loading: true,
              pagination: {
                pageSize: data.pageSize,
                total: data.total,
                showSizeChanger: true,
                showTotal: total => `共 ${total} 条记录`,
              },
              pageIndex: data.current,
            }, ()=> {
                this.getLabelList(data.current);
            })
    }

    render() {
        const {loading, startLoading} = this.state;
        const {pruductLebal}= this.props;
        return (
            <div className={styles.contentBox}>
                <Spin spinning={startLoading}>
                    <Button
                        type="primary"
                        style={{marginBottom: 16}}
                        onClick ={() => {
                        const title = '新增标签';
                        const width = 320;
                        this.addLabel.show({action: 'add',width, title}, this.clickAddLabel);
                        }}
                    >
                        新增标签
                    </Button>
                    <div className="popconfirm">
                    <Table
                 dataSource={pruductLebal}
                 pagination={this.state.pagination}
                 rowKey={record => record.id}
                 loading={loading}
                 onChange={this.changeTable}
                 columns={[
                    {
                    title: '标签名称',
                    dataIndex: 'name',
                    key: 'name',
                    },
                    {
                      title: '商品数',
                      dataIndex: 'productNum',
                      align: 'right',
                      key: 'productNum',
                    },
                    {
                      title: '创建时间',
                      dataIndex: 'createTime',
                      key: 'createTime',
                      align: 'left',
                    },
                    {
                      title: '操作',
                      key: 'action',
                      align: 'right',
                      render: (Text, record) => {
                          return (
                            <div>
                                <a
                                    href="javascript:;"
                                    style={{marginBottom: 16,cursor: 'pointer'}}
                                    onClick={() => {
                                      const title = '编辑标签';
                                      const width =320;
                                      this.addLabel.show(
                                          {action: 'edit',width, id: record.id, name: record.name, title},
                                          this.clickEditLabel
                                        );
                                    }}
                                >
                                    编辑
                                </a>
                                <Divider type="vertical" />
                                <Popconfirm
                                  placement="topRight"
                                  title="确认删除?"
                                  okText="确认"
                                  cancelText="取消"
                                  onConfirm={() => this.clickDelete(record.id)}
                                >
                                  <a href="javascript:;">删除</a>
                                </Popconfirm>
                            </div>
                        )
                      }
                    },
                 ]}
                />
                </div>

                </Spin>

                <AddLebal
                  ref={e => {
                    this.addLabel = e;
                    }}
                  />
            </div>
        )
    }
  }

  export default ProductLabel;

